<div class='sider'>

  <app-sider-contextmenu
    [currentList]="contextmenuItem"
    [visible]="contextmenuVisible"
    [x]="contextmenuX"
    [y]="contextmenuY"></app-sider-contextmenu>

  <app-sider-user></app-sider-user>

  <div class="app-sider-content">
    <ul nz-menu>
      <li nz-menu-item [nzSelected]="'/my-day' === currentUrl">
        <a routerLink='/my-day' routerLinkActive="active">
          <div class="section">
            <span class="nav-text">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-sun"></use>
              </svg>
              我的一天
            </span>
            <span class="nav-number" *ngIf="unFinishedCount!=0">{{unFinishedCount}}</span>
          </div>
        </a>
      </li>
      <li nz-menu-item [nzSelected]="'/lists/'+item.id === currentUrl" (contextmenu)="handleContextmenu($event, item)" *ngFor="let item of menuItems">
        <a routerLink="/lists/{{item.id}}" routerLinkActive="active">
          <div class="section">
            <span class="nav-text">
              <svg *ngIf="item.icon === 'todo'" class="icon" aria-hidden="true">
                  <use xlink:href="#icon-home"></use>
              </svg>
              <svg *ngIf="item.icon === 'list'" class="icon" aria-hidden="true">
                  <use xlink:href="#icon-list"></use>
              </svg>
              <i *ngIf="!isDefaultIcon(item.icon)" class="emoji">{{item.icon}}</i>
              <span>{{item.title}}</span>
            </span>
            <span class="nav-number" *ngIf="item.unfinished!=0">{{item.unfinished}}</span>
          </div>
        </a>
      </li>
    </ul>
    <div class="newList" (click)="addList()">
      <span>
        <i class="anticon anticon-plus-circle-o"></i>
        新建清单
      </span>
    </div>
  </div>

</div>
